<template>
	<el-config-provider
		:locale="locale"
		:size="config.size"
		:zIndex="config.zIndex"
		:button="config.button"
	>
		<router-view></router-view>
	</el-config-provider>
</template>

<script setup lang="js">
	import { useI18n } from 'vue-i18n'
	import { ref, computed, onMounted } from 'vue'
	import tool from './utils/tool.js'
	import colorTool from '@/utils/color.js'
	import defaultConfig from './config/index.js'

	defineOptions({
		name: 'App'
	})

	const { messages, locale: currentLocale } = useI18n()

	const config = ref({
		size: 'default',
		zIndex: 2000,
		button: {
			autoInsertSpace: false
		}
	})

	const locale = computed(() => {
		return messages.value[currentLocale.value].el
	})

	onMounted(() => {
		//设置主题颜色
		const app_color = defaultConfig.COLOR || tool.data.get('APP_COLOR')
		if (app_color) {
			document.documentElement.style.setProperty('--el-color-primary', app_color)
			for (let i = 1; i <= 9; i++) {
				document.documentElement.style.setProperty(
					`--el-color-primary-light-${i}`,
					colorTool.lighten(app_color, i / 10)
				)
			}
			for (let i = 1; i <= 9; i++) {
				document.documentElement.style.setProperty(
					`--el-color-primary-dark-${i}`,
					colorTool.darken(app_color, i / 10)
				)
			}
		}
	})
</script>

<style lang="scss">
	@use '@/style/style' as *;
</style>
